<template name="homeCoupon">
    <view class="container">
		<image style="width: 189upx; height: 211upx;" :src="couponbg" mode="aspectFit"></image>
		<view class="contentInfo">
			<text class="couponName" @click="showCouponName">{{couponName}}</text>
			<text style="color: #992634; font-size: 22upx; margin-top: -20upx;">{{couponContent}}</text>
			<view class="btn-get" @click="getCoupon" >
			   {{isReceive == 1 ? "已领取" : "立即领取"}}
			</view>
			<text style="color: #FFF0E5; font-size: 17upx;">{{storeCount}}</text>
		</view>
    </view>
</template>

<script>
	export default {
		name:"homeCoupon",
		data() {
			return {
				couponbg:this.baseImageUrl+'uni_rental/home_couponBg.png'
			};
		},
		props: {
			couponName: {
				type: String,
				default:''
			},
			businessId: {
				type: String,
				default:''
			},
			couponContent: {
				type: String,
				default:''
			},
			
			storeCount: {
				type: String,
				default:'0'
			},
			isReceive: {
				type: Number,
				default: 1
			},
			
		},
			
		methods:{
			getCoupon() {
				this.$emit("getCoupon", {businessId: this.businessId})
			},
			showCouponName() {
				uni.showToast({
					title: this.couponName,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		position: relative;
		.contentInfo {
			width: 189upx;
			height: 211upx;
			display: inherit;
			flex-direction: column;
			justify-content: space-around;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.btn-get {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 36upx;
		font-size: 18upx;
		border-radius: 18upx;
		margin-left: 40upx;
		margin-right: 40upx;
		margin-bottom: -15upx;
		color: #992634;
		background: linear-gradient(-45deg,#ffb780 0%, #ffdab9 100%);
		
	}
	text {
		
	   text-align: center; 	
	}
	
	.couponName {
		color: $black33;
		width: 150upx;
		font-size: 24upx;
		white-space: nowrap;
		text-align: center;
		align-self: center;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-box-orient: vertical;
	}
</style>
